<template>
    <view class="shenhe">
        <view class="shenheCneter" style="padding: 0;">
            <view  class="list out-shadow flex flex-align" style="margin-bottom: 0;border-radius: 0;padding-bottom: 0;">
                <view class="right">
                    <view class="liveLogItemLeft flex flex-align flex-bt">
                        <view class="liveLogItemLeftInfo">
                            <view class="liveLogItemLeftInfoName"> {{ datainfo?.subject }} </view>
                            <view class="liveLogItemLeftInfoTime">开播时间：{{timestampToDate(datainfo?.start_time ) }} </view>
                            <view class="liveLogInfoID flex flex-align">
                                <view class="lists flex flex-align">
                                    <image src="/static/teamcenter/center09.png" mode="scaleToFill" />
                                    <view class="text">{{ datainfo?.room_id }}</view>
                                </view>
                                <view class="lists flex flex-align">
                                    <image src="/static/teamcenter/center10.png" mode="scaleToFill" />
                                    <view class="text">￥{{ datainfo?.sign_red }}</view>
                                </view>
                                <view class="lists flex flex-align">
                                    <image src="/static/teamcenter/center11.png" mode="scaleToFill" />
                                    <view class="text"> {{ datainfo.live_status===1?'未开始':datainfo.live_status===2?'直播中':'已结束' }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="liveLogItemLeftImg">
                            <image :src="datainfo?.img_url" />
                        </view>
                    </view>
                    <view class="liveLogFlex flex flex-align">
                        <view class="list flex-1">
                            <view class="content">{{ datainfo?.total_sum }} </view>
                            <view class="title">发放金额</view>
                        </view>
                        <view class="list flex-1">
                            <view class="content">{{ datainfo?.red_count }} <span>人</span></view>
                            <view class="title">发放人数</view>
                        </view>
                        <view class="list flex-1">
                            <view class="content">{{ datainfo?.total_count }} <span>人</span></view>
                            <view class="title">观看人数</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <uv-sticky :offset-top="offsetTop">
            <view style="background: #f5f5f5;padding:30rpx 30rpx 0;">
                <view class="homeTitle flex flex-align">
                    <text></text>
                    <view class="title">用户观播数据</view>
                </view>
                <view class="flex flex-align flex-bt searchTop">
                    <view class="left">
                        <view class="searchBar flex flex-align flex-bt"> 
                            <uni-search-bar class="flex-1" placeholder="输入直播间ID/名称" cancelButton="none"
                                :focus="false" v-model="searchValue">
                            </uni-search-bar>
                            <view class="searchText" @click="cancel">搜索</view>
                        </view>
                    </view>
                    <picker @change="bindPickerChange" :value="index" :range="array">
                        <view class="right flex flex-align flex-center">
                            <view>{{array[index]}}</view>
                            <image src="/static/teamcenter/center13.png" mode="scaleToFill" />
                        </view>
                    </picker>
                </view>
            </view>
        </uv-sticky>
        <view class="shenheCneter">
            <view v-if="list.length !== 0" class="list out-shadow flex flex-align" v-for="(item, index) in list"
                :key="index">
                <view class="right">
                    <view class="liveLogItemLeft flex flex-align">
                        <view class="liveLogItemLeftImg">
                            <image :src="item?.headimg" style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 10rpx;" />
                        </view>
                        <view class="liveLogItemLeftInfo flex flex-align">
                            <view class="liveLogItemLeftInfoName"> {{ item?.nickname }} </view>
                            <view class="liveLogInfoID flex flex-align" style="margin-left: 10rpx;">
                                 <view class="lists flex flex-align">
                                    <image src="/static/teamcenter/center09.png" mode="scaleToFill" />
                                    <view class="text">{{ datainfo?.room_id }}</view> 
                                </view>   
                            </view>
                        </view>
                    </view>
                    <view class="liveLogFlex flex flex-align">
                        <view class="list flex-1">
                            <view class="title">观看总时长</view>
                            <view class="content">{{ item?.time }} </view>
                        </view>
                        <view class="list flex-1">
                            <view class="title">累计打卡次数</view>
                            <view class="content">{{ item?.sign_num }} <span>次</span></view>
                        </view>
                        <view class="list flex-1">
                            <view class="title">红包发放金额</view>
                            <view class="content">{{ item?.sign_red||0 }} <span>元</span></view>
                        </view>
                    </view>
                    <view class="liveLogItemRight">
                        <view style="font-size: 24rpx;color: #999;font-weight: normal;margin-bottom: 5rpx;">发放状态及原因</view>
                       {{item.remark||'未满足时长要求'}}
                    </view>
                </view>
                <view class="status blue-linear" :style="{background: item.remark?'':'#999'}">
                     {{ item.remark?'已签到':'未签到' }}
                </view>
            </view>
            <view v-else class="noData" style="padding-top: 10vh;">
                <image src="/static/nodata/nodata02.png" />
                <view class="noDataText">暂无数据</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import API_CENTER from '@/api/teamcenter'
import { getCache,  timestampToDate, toast } from '@/utils/index'
const datainfo =ref<Recordable>({})
const array = ref(['发放状态','发放中','成功','失败'])
const index = ref(0)
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
onLoad((e: any) => {
    datainfo.value = getCache('liveDetail')
    params.room_id = datainfo.value.room_id
    loadMore()
})
const searchValue = ref('')

const { list, isLoading, hasMore, loadMore, reset ,params} = useInfiniteLoad(API_CENTER.getLiveDetail, {
    initialParams: {},
    transformResponse: (response: any) => {
        return response.list || [];
    }
});


const cancel = () => {
    params.user_keys = searchValue.value
    reset()
    loadMore()
}

const bindPickerChange = (e: any) => {
    index.value = e.detail.value
    params.status = e.detail.value
    reset()
    loadMore()
}


onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
.searchBar {
    padding-right: 20rpx;
    .searchText {
        background: #3C7CFF;
        color: #fff;
        padding: 15rpx 30rpx;font-size: 24rpx;
        border-radius: 14rpx;
    }
}
.searchTop{
    .left{
        flex: 1;
    }
    .right{
       background: #fff;border-radius: 24rpx;font-size: 24rpx;
        padding: 18rpx  0;width: 170rpx;
        image{
            width: 30rpx;
            height: 30rpx;
        }
    }
}
.shenheCneter {
    padding:10rpx 30rpx 30rpx;
    .liveLogFlex{
        .list{
            background:#F5F6FA ;margin-right: 20rpx;padding: 20rpx 0;border-radius: 20rpx;text-align: center;
            .title{
                font-size: 22rpx;margin-bottom: 5rpx;
                color: #999896;
            }
            .content{
                font-size: 26rpx;
                color: #323233;
                font-weight: bold;
            }
        }
        .list:last-child{
            margin-right: 0;
        }
    }
    .list {
        margin-bottom: 20rpx;
        background:#fff;
        padding: 30rpx 20rpx;
        border-radius: 30rpx;
        position: relative;

        .right {
            flex: 1;

            .liveLogItemLeft {
                margin-bottom: 20rpx;

                .liveLogItemLeftImg {
                    image {
                        width: 168rpx;
                        height: 122rpx;
                        border-radius: 20rpx;
                    }
                }
                .liveLogItemLeftInfoTime{
                    font-size: 24rpx;margin: 4rpx 0;
                    color: #999;
                }
                .liveLogItemLeftInfo {
                    .liveLogItemLeftInfoName {
                        font-size: 28rpx;
                        font-weight: bold;
                    }

                    .liveLogItemLeftInfoID {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }

            .liveLogItemRight {
                font-size: 24rpx;
                color: #323233;
                font-weight: bold;
                background: #F5F6FA;
                border-radius: 20rpx;
                padding:30rpx;
            }
            .liveLogInfoID{
                .lists{
                    background: #D4E3FF;margin-right: 10rpx;
                    border-radius: 30rpx;padding: 2rpx 14rpx 2rpx 0;
                    font-size: 20rpx;margin-top: 10rpx;
                    color: #3C7CFF;text-align: center;
                    image{
                        width: 32rpx;
                        height: 32rpx;margin-right: 4rpx;
                    }
                }
                .lists:last-child{
                    margin-right: 0;
                }
            }
            .liveLogItemBottom{
                button{
                    font-size: 24rpx;margin: 0;margin-left: 10rpx;font-weight: bold;
                }
                .exportBtn{
                    background: #fff;
                    color: #3C7CFF;
                    border-radius: 16rpx;
                    padding: 0rpx 30rpx;border: 1px solid #3C7CFF;
                }
                .detailBtn{
                    border-radius: 16rpx;
                    padding: 0rpx 30rpx;color: #fff;
                }
            }
        }
    }
}


.status {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24rpx;
    color: #fff;
    padding: 6rpx 20rpx;
    border-radius: 0 30rpx 0 30rpx;
    font-weight: bold;
}
:deep() {
    .uni-calendar-item--before-checked,.uni-calendar-item--after-checked {
        background-color: #2357bd;
    }
    .uni-searchbar__box{
        background: #fff!important;
    }
    .uni-searchbar{padding-left: 0;}
}
</style>
